﻿@{
    ViewBag.Title = "ArrayManipulate";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>Array Manipulate</h2>
<br />
<h3>Path: @ViewBag.Path</h3>
<br />
<h3>See the result on console</h3>
<br />



<hr />
members list:
<p id="member1"></p>

<hr />
upper case members list:
<p id="member2">

<hr />
ordered members list:
<div style="padding-left: 20px;">
    <ul id="member3">
    </ul>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        var members = ["John", "Steve", "Ben", "Damon", "Ian"];

        // display members list
        var joinMembers1 = $.map(members, function (n, i) { return (i + 1 + ". " + n); });
        $('#member1').html(joinMembers1.join("<br />"));

        // display upper case members list
        var joinMembers2 = $.map(members, function (n, i) { return (i + 1 + "> " + n.toUpperCase()); });
        $('#member2').html(joinMembers2.join("<br />"));

        // display ordered members list
        $.each(members, function (index, value) {
            $("#member3").append($("<li>" + value + "</li>"));
        });
    });
</script>